<template>
  <!--商品添加基本信息  -->
  <div id="addCount">
    <w-panel-wrap>
      <w-panel-title :title="title">
        <button class="btn-X" @click="closeThisWin"></button>
      </w-panel-title>
      <w-panel>
        <w-form-validate @on-validate="validate">
          <div class="item">
            <div class="item-group">
              <w-label class="label box" :must="true">账户类型:</w-label>
              <div class="box">
                <w-radio name="bankType" :label="'1'" v-model.number="params.bankType">个人账户</w-radio>
                <w-radio name="bankType" :label="'2'" v-model.number="params.bankType">企业账户</w-radio>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <w-label class="label box label-h" :must="true">账户名称:</w-label>
              <div class="box">
                <w-input v-model="params.trueName" :maxlength="5" v-if="params.bankType == 1" :validate="true" error="必填"></w-input>
                <w-input v-model="params.trueName" :maxlength="20" v-else :validate="true" error="必填"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <w-label class="label box label-h" :must="true">账户号码:</w-label>
              <div class="box">
                <w-input v-model="params.bankNumber" :validate="true" :minlength="16" :maxlength="19" rule="isCard" error="银行卡为16位或19位"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">开户地址:</span>
              <div class="box">
                <div style="min-width:90px;display:inline-block;">
                  <w-select v-model="cityName" :options="firstCityList" @on-select="getSecondCityList(cityName)"></w-select>
                </div>
                <div style="min-width:90px;display:inline-block;">
                  <w-select v-model="params.cityId" :options="secondCityList" @on-select="getName(params.cityId, secondCityList)"></w-select>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <w-label class="label box label-h" :must="true">开户行:</w-label>
              <div class="box">
               <div style="min-width:90px;display:inline-block;">
                  <w-select v-model="params.bankId" :options="backList" :validate="true" rule="isEmpty" error="必选"></w-select>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">所属支行:</span>
              <div class="box">
                <w-input v-model="params.subBranchName" :maxlength="15" :validate="false"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <w-label class="label box" :must="true">是否为默认收款账户:</w-label>
              <div class="box">
                <w-radio name="defaultCollection" :label="'1'" v-model.number="params.defaultCollection">是</w-radio>
                <w-radio name="defaultCollection" :label="'0'" v-model.number="params.defaultCollection">否</w-radio>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-btn">
              <button class="btn main">提交</button>
            </div>
          </div>
        </w-form-validate>
      </w-panel>
    </w-panel-wrap>
  </div>
</template>
<script>
// 添加银行卡和修改银行卡
import { apiCount } from '../../../common/api'
// 地区组件
import areaPicker from '../../../components/AreaPicker/areaPicker'
// 提示组件
import app from '../../../main'

export default {
  data() {
    return {
      params: {
        // accessToken: this.$store.getters.token,
        accessToken: this.$store.getters.token,
        bankType: 1,
        trueName: '',
        bankName: '',
        bankNumber: '',
        cityId: '',
        subBranchName: '',
        defaultCollection: 0,
        city: '',
        province: '',
        bankId: ''
      },
      firstCityList: [],
      secondCityList: [],
      cityName: '',
      backList: []
    }
  },
  props: {
    title: {
      type: String,
      default: '新增'
    },
    id: {
      type: Number
    }
  },
  methods: {
    validate() {
      let _this = this
      if (_this.params.bankId == '') {
        $toast('请选择银行')
        return
      }
      // console.log(this.params.cityId
      if (this.id && this.id != -1 && this.title == '修改') {
        this.editBankCard(this.params)
        return
      }
      this.addBankCard(this.params)
    },
    closeThisWin() {
      this.$emit('close-win')
    },
    // 新增银行卡号
    addBankCard(param) {
      if (!param.bankId) {
        $toast('请选择银行')
        return
      }

      param.defaultCollection = param.defaultCollection + ''
      let _this = this
      this.backList.forEach(function(bank, index) {
        if (bank.value == param.bankId) {
          param.bankName = bank.label
        }
      })
      apiCount.addBankCard(param).then((data) => {
        this.$emit('close-win')
        this.closeThisWin()
      })
    },
    // 修改银行卡号
    editBankCard(datas) {
      if (!datas.bankId) {
        $toast('请选择银行')
        return
      }
      datas.defaultCollection = datas.defaultCollection + ''
      let _this = this
      this.backList.forEach(function(bank, index) {
        if (bank.value == datas.bankId) {
          datas.bankName = bank.label
        }
      })

      this.$set(datas, 'id', this.id)
      apiCount.editBankCard(datas).then((data) => {
        this.$emit('close-win')
        this.closeThisWin()
      })
    },
    // 根据id查询单个银行卡
    showBankCard(id) {
      apiCount.showBankCard({id: id, accessToken: this.$store.getters.token}).then((data) => {
        this.params.bankName = data.bankName
        this.params.bankNumber = data.bankNumber
        this.params.bankType = data.bankType
        this.params.subBranchName = data.subBranchName
        this.params.trueName = data.trueName
        this.params.bankId = data.bankId
        this.params.defaultCollection = data.defaultCollection
        this.getIdCityList(data.province)
        this.params.cityId = data.cityId
        this.params.city = data.city
      })
    },
    // 根据省id找市
    getSecondCityList(id) {
      this.secondCityList = []
      this.params.cityId = ''
      let _this = this
      this.$store.getters.allArea.forEach(function(item, index) {
        // 市
        if (item.id == id) {
          _this.params.province = item.areaName
          item.childs.forEach(function(element, index) {
            _this.secondCityList.push({
              value: element.id,
              label: element.areaName
            })
          })
        }
      })
    },
     // 根据省名找id
    getIdCityList(name) {
      let _this = this
      this.$store.getters.allArea.forEach(function(item, index) {
        if (item.areaName == name) {
          _this.getSecondCityList(item.id)
          _this.cityName = item.id
        }
      })
    },
    // 获取地区名
    getName(id, name) {
      let _this = this
      name.forEach(function(element, index) {
        if (element.value == id) {
          _this.params.city = element.label
        }
      })
    },
    // 获取银行
    showBankName() {
      let _this = this
      apiCount.showBankName(this.$store.getters.token).then((data) => {
          data.bankList.forEach(function(element, index) {
            _this.backList.push({
              value: element.bankId,
              label: element.bankName
            })
          })
      })
    }
  },
  created() {
    this.$store.dispatch('fetchAllArea')
    if (this.id && this.id != -1 && this.title == '修改') {
      this.showBankCard(this.id)
    }
    this.showBankName()
  },
  mounted() {
    let _this = this
    this.$store.getters.allArea.forEach(function(item, index) {
      // 省
      _this.firstCityList.push({
        value: item.id,
        label: item.areaName
      })
    })
  }
}
</script>
<style lang="scss">
#addCount {
  .btn-X {
    float: right;
    width: 12px;
    height: 12px;
    margin-top: 20PX;
    background: url('../../../components/Modal/close.png') no-repeat;
    background-size: 100% 100%;
  }
  .error-tip {
    position: absolute;
    left: 20px;
    z-index: 11
  }
  .item {
    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;
    .item-btn {
      text-align: center;
    }
    .item-group {
      .label {
        min-width: 146px;
        text-align: right;
        color: #999;
        vertical-align: top;
      }
      .label-h {
        line-height: 30px;
        height: 30px;
      }
      .box {
        display: inline-block;
        position: relative;
        .good-number {
          min-height: 30px;
          padding: 0 10px;
          line-height: 1.42857143;
          background-color: #fafafa;
          border: 1px solid #ececec;
          border-radius: 4px;
        }
      }
      .box-w {
        min-width: 500px;
      }
      .item-c {
        color: #666;
      }
      .tip {
        margin-top: 5px;
      }
    }
    .label-c {
      color: #999;
    }
    .label-b {
      color:  #47BDF4;
      cursor: pointer;
    }
  }
  .large-input {
    .form-control {
      width: 200px;
    }
  }
  .goods-price {
    .w-input {
      width: 80px;
      display: inline-block;
    }
  }
  .panel {
    padding: 30px 30px 20px 0;
  }
}
</style>